<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>微博</title>
    <link href="style/weibo.css" rel="stylesheet" type="text/css"/>
    <script src="./lib/axios.min.js"></script>
</head>

<body>
<div class="jyArea">
    <div class="takeComment">
        <textarea name="textarea" class="takeTextField" id="tijiaoText"></textarea>
        <div class="takeSbmComment">
            <input type="button" class="inputs" value=""/>
        </div>
    </div>


    <div class="commentOn">

    </div>
</div>
</body>
<script>
	// 获取输入元素
	const contextArea = document.querySelector("#tijiaoText");
	axios.defaults.baseURL = "http://zhangpeiyue.com";
	axios.interceptors.response.use(response => {
		if (response.data.ok === 1)
			return response.data;
		else {
			alert(response.data.msg);// 提示错误信息
			return new Promise(() => {
			});
		}
	});
	// 完成添加微博
	// 根据样式来找元素。class的值为inputs
	document.querySelector(".inputs").onclick = async function () {
		// trim:移除左右空格
		const context = contextArea.value.trim();
		if (context) {
			const {ok, msg} = await axios.post("/weibo", {
				context
			})
			contextArea.value = null;
			getWeibo();
		} else {
			alert("请输入微博的内容！")
		}
	}

	// 获取微博
	const getWeibo = async function (pageNo = 1) {
		const {contextList,pageSum,pageNo:pageNoS} = await axios.get("/weibo", {
			params: {
				pageNo,
				pageSize: 2
			}
		});
		let pageInfo = "";
		for(let i=1;i<=pageSum;i++){
			pageInfo += ` <a onclick="getWeibo(${i})" href="javascript:;" class="${pageNoS===i?'active':''}">${i}</a>`
        }
		document.querySelector(".commentOn").innerHTML = (`
		    <div class="noContent" style="display:${contextList.length===0?'block':'none'}">暂无留言</div>
            <div class="messList">
                ${
			        contextList.map(item=>(`
                        <div class="reply">
                            <p class="replyContent">${item.context}</p>
                            <p class="operation">
                                <span class="replyTime">${item.addTime}</span>
                                <span class="handle">
                                    <a href="javascript:;" class="top">${item.topNum}</a>
                                    <a href="javascript:;" class="down_icon">${item.downNum}</a>
                                    <a href="javascript:;" class="cut">删除</a>
                                </span>
                            </p>
                        </div>
			        `)).join("")
                }

            </div>
            <div class="page">
               ${pageInfo}
            </div>
		`)
	}
	getWeibo();
</script>
</html>
